<template>
  <div style="padding: 8px;">
    <el-card class="box-card" style="display: flex; align-items: center ;">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item :label="`${$t('package')}id`">
          <el-input v-model="formLabelAlign.id" :placeholder="$t('packagename')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('packagename')">
          <el-input v-model="formLabelAlign.flowName" :placeholder="$t('packagename')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('packagetype')">
          <el-select v-model="formLabelAlign.packageType" :placeholder="$t('请选择')">
            <el-option v-for="item in options" :key="item.value" :label="$t(`${item.label}`)" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{ $t("query") }}
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="reset">{{ $t("reset") }}</el-button>
        </el-form-item>
        <el-button style="float: right" type="success" @click="onAdd">{{ $t("add") }}
        </el-button>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px;">
      <el-table size="small" :header-cell-style="{ fontSize: '12px' }" v-loading="loading" :data="tableData"
        style="width: 100%;">
        <el-table-column width="40" label="id" prop="id"></el-table-column>
        <el-table-column :label="$t('packagename')" prop="flowName">
          <template #default="{ row }">
            {{ $t(`${row.flowName}`) }}
          </template>
        </el-table-column>
        <el-table-column :label="`${$t('EscrowRatio')}`" prop="trusteeshipRate">
        </el-table-column>
        <el-table-column :label="`${$t('FlowPrice')}(CFP)`" prop="flowPrice">
        </el-table-column>
        <el-table-column :label="`${$t('FlowQuota')}(GB)`" prop="flowAmount">
        </el-table-column>
        <el-table-column :label="`${$t('grossoutput')}(CFP)`" prop="totalAmoun">
        </el-table-column>
        <el-table-column :label="`${$t('EstimatedDailyOutput')}(CFP)`" prop="predictAmountTo">
        </el-table-column>
        <el-table-column :label="`${$t('EstimatedDailyOutput')}(CFP)`" prop="predictAmountEnd">
        </el-table-column>
        <!-- <el-table-column prop="totalPredictAmount" :label="`${$t('CumulativeOutput')}(CFP)`">
                </el-table-column>
                <el-table-column prop="totalNumber" :label="`${$t('total')}(CFP)`">
                </el-table-column> -->
        <el-table-column :label="`${$t('limit')}(CFP)`" prop="purchaseStatus">
          <template #default="{ row }">
            {{ row.purchaseStatus === 1 ? `${$t("open")}` : `${$t("close")}` }}
          </template>
        </el-table-column>
        <el-table-column :label="`${$t('maximumnumber')}`" prop="upperLimitNumber">
        </el-table-column>
        <el-table-column :label="$t('state')" prop="status">
          <template #default="{ row }">
            {{ !row.status ? $t("无效") : $t("有效") }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('type')" prop="packageType">
          <template #default="{ row }">
            {{ $t(`${packageType[row.packageType]}`) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('creator')" prop="createBy">
        </el-table-column>
        <el-table-column :label="$t('creationTime')" prop="createTime">
        </el-table-column>
        <el-table-column :label="$t('regenerator')" prop="updateBy">
        </el-table-column>
        <el-table-column :label="$t('updateTime')" prop="updateTime">
        </el-table-column>
        <el-table-column :label="$t('operation')">
          <template #default="{ row }">
            <el-button size="small" type="text" @click="edit(row)">{{ $t("edit") }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 弹出框 -->
    <el-dialog :before-close="handleClose" :title="`${$t('add')} ${$t('package')}`" :visible.sync="dialogVisible"
      width="50%">
      <el-form ref="ruleForm" :model="formLabel" :rules="rules" label-position="right" label-width="150px">
        <el-form-item :label="$t('TrafficName')" prop="flowName">
          <el-input v-model="formLabel.flowName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('EscrowRatio')" prop="trusteeshipRate">
          <el-input v-model="formLabel.trusteeshipRate"></el-input>
        </el-form-item>
        <el-form-item :label="`${$t('FlowPrice')}(CFP)`" prop="flowPrice">
          <el-input v-model="formLabel.flowPrice"></el-input>
        </el-form-item>
        <el-form-item :label="`${$t('FlowQuota')}(GB)`" prop="flowAmount">
          <el-input v-model="formLabel.flowAmount"></el-input>
        </el-form-item>
        <el-form-item :label="`${$t('grossoutput')}(CFP)`" prop="predictAmountTo">
          <el-input v-model="formLabel.predictAmountTo"></el-input>
        </el-form-item>
        <el-form-item :label="`${$t('EstimatedDailyOutput')}(CFP)`" prop="predictAmountEnd">
          <el-input v-model="formLabel.predictAmountEnd"></el-input>
        </el-form-item>
        <el-form-item :label="$t('total')" prop="totalNumber">
          <el-input v-model="formLabel.totalNumber"></el-input>
        </el-form-item>
        <el-form-item :label="$t('state')" prop="status">
          <el-select v-model="formLabel.status">
            <el-option v-for="item in stateType" :key="item.value" :label="$t(`${item.label}`)" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('type')" prop="packageType">
          <el-select v-model="formLabel.packageType">
            <el-option v-for="item in options" :key="item.value" :label="$t(`${item.label}`)" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="`${$t('CumulativeOutput')}(CFP)`" prop="totalPredictAmount">
          <el-input v-model="formLabel.totalPredictAmount"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="add">{{ $t("confirm") }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  addTrafficsListApi,
  editTrafficsListApi,
  getTrafficsListApi,
} from "../../../api/appuser/trafficsList";

export default {
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        flowName: "",
        packageType: "",
        id: "",
      },
      options: [
        {
          value: 1,
          label: "初級流量包",
        },
        {
          value: 2,
          label: "中級流量包",
        },
        {
          value: 3,
          label: "高級流量包",
        },
      ],
      stateType: [
        {
          value: 0,
          label: "无效",
        },
        {
          value: 1,
          label: "有效",
        },
      ],
      packageType: {
        1: "初级",
        2: "中级",
        3: "高级",
      },
      tableData: [],
      dialogVisible: false,
      formLabel: {
        flowName: "",
        trusteeshipRate: "",
        flowPrice: "",
        flowAmount: "",
        predictAmountTo: "",
        predictAmountEnd: "",
        totalNumber: "",
        status: "",
        packageType: "",
        totalPredictAmount: "",
      },
      loading: false,
      rules: {
        flowName: [
          { required: true, message: `${this.$t("ent")}`, trigger: "blur" },
        ],
        // trusteeshipRate: [{ required: true, message: `${this.$t('ent')}`, trigger: "blur" }],
        flowPrice: [
          { required: true, message: `${this.$t("ent")}`, trigger: "blur" },
        ],
        flowAmount: [
          { required: true, message: `${this.$t("ent")}`, trigger: "blur" },
        ],
        predictAmountTo: [
          { required: true, message: `${this.$t("ent")}`, trigger: "blur" },
        ],
        predictAmountEnd: [
          { required: true, message: `${this.$t("ent")}`, trigger: "blur" },
        ],
        //totalNumber: "",: [{ required: true, message: `${this.$t('ent')}`, trigger: "blur" }],
        status: [
          { required: true, message: `${this.$t("ent")}`, trigger: "blur" },
        ],
        packageType: [
          { required: true, message: `${this.$t("ent")}`, trigger: "blur" },
        ],
        //totalPredictAmount: [{ required: true, message: `${this.$t('ent')}`, trigger: "blur" }],
      },
    };
  },
  created() {
    //获取流量包列表
    this.getTrafficsList(this.formLabelAlign);
  },
  methods: {
    //获取流量包列表
    async getTrafficsList(data) {
      this.loading = true;
      const res = await getTrafficsListApi(data);
      this.tableData = res.rows;
      this.loading = false;
    },

    //查询
    onSubmit() {
      this.getTrafficsList(this.formLabelAlign);
    },
    //重置
    reset() {
      this.formLabelAlign.flowName = "";
      this.formLabelAlign.packageType = "";
      this.formLabelAlign.id = "";
      this.getTrafficsList(this.formLabelAlign);
    },
    //关闭弹窗
    handleClose() {
      this.$refs.ruleForm.resetFields();
      console.log("关闭了");
      this.dialogVisible = false;
      this.formLabel = {};
      this.getTrafficsList(this.formLabelAlign);
    },
    //打开dilog
    onAdd() {
      this.dialogVisible = true;
    },
    //添加
    async add() {
      //   if (
      //     !this.formLabel.flowName ||
      //     !this.formLabel.trusteeshipRate ||
      //     !this.formLabel.flowPrice ||
      //     !this.formLabel.flowAmount ||
      //     !this.formLabel.predictAmountTo ||
      //     !this.formLabel.predictAmountEnd ||
      //     !this.formLabel.totalNumber ||
      //     !this.formLabel.status ||
      //     !this.formLabel.packageType ||
      //     !this.formLabel.totalPredictAmount
      //   ) {
      //     return this.$message.error(this.$t("请填写完整信息"));
      //   }
      let validationFailed = false;
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          validationFailed = true;
          console.log("表单校验失败");
        }
      });
      if (validationFailed) {
        this.$message.error(this.$t("请填写完整信息"));
        return;
      }
      console.log(this.formLabel);
      if (!this.formLabel.id) {
        const res = await addTrafficsListApi(this.formLabel);
        console.log(res);
        this.$message.success(this.$t("添加成功"));
      } else {
        const res = await editTrafficsListApi(this.formLabel);
        console.log(res);
        this.$message.success(this.$t("修改成功"));
      }
      this.handleClose();
    },
    edit(row) {
      this.onAdd();
      this.formLabel = row;
    },
  },
};
</script>
<style lang="" scoped></style>
